<!--
 * @Description: 确认订单页面组件
 * @Author: hai-27
 * @Date: 2020-02-23 23:46:39
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-29 13:10:21
 -->
<template>
	<div class="confirmOrder">
		<!-- 头部 -->
		<div class="confirmOrder-header">
			<div class="header-content">
				<p>
					<i class="el-icon-s-order"></i>
				</p>
				<p>确认订单</p>
				<router-link to></router-link>
			</div>
		</div>
		<!-- 头部END -->

		<!-- 主要内容容器 -->
		<div class="content">
			<!-- 选择地址 -->
			<div class="section-address">
				<p class="title">收货地址</p>
				<div class="address-body">
					<ul>
						<li
								:class="selectAddressId==item.id?'in-section':''"
								@click="selectAddressId=item.id"
								v-for="item in addressList"
								:key="item.id"
						>
							<div class="edit-delete-address">
								<!--<i class="el-icon-edit"></i>-->
								<i class="el-icon-delete" @click="deleteAddress(item.id)"></i>
							</div>
							<h2>{{ item.name }}</h2>
							<p class="phone">{{ item.phone }}</p>
							<p class="address">{{ item.provinceName }}-{{ item.cityName }}-{{ item.districtName }}</p>
							<p class="address">{{ item.address }}</p>
						</li>
						<li class="add-address" @click="showAddressDialog">
							<i class="el-icon-circle-plus-outline"></i>
							<p>添加新地址</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 选择地址END -->

			<!-- 商品及优惠券 -->
			<div class="section-goods">
				<p class="title">商品及优惠券</p>
				<div class="goods-list">
					<ul>
						<li v-for="item in getCheckGoods" :key="item.id">
							<img :src="item.productImage"/>
							<span class="pro-name">{{ item.productName }}</span>
							<span class="pro-price">{{ item.productPrice }}元 x {{ item.quantity }}</span>
							<span class="pro-status"></span>
							<span class="pro-total">{{ new Decimal(item.productPrice).mul(new Decimal(item.quantity)) }}元</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 商品及优惠券END -->

			<!-- 配送方式 -->
			<div class="section-shipment">
				<p class="title">配送方式</p>
				<p class="shipment">包邮</p>
			</div>
			<!-- 配送方式END -->

			<!-- 发票 -->
			<div class="section-invoice">
				<p class="title">发票</p>
				<p class="invoice">电子发票</p>
				<p class="invoice">个人</p>
				<p class="invoice">商品明细</p>
			</div>
			<!-- 发票END -->

			<!-- 结算列表 -->
			<div class="section-count">
				<div class="money-box">
					<ul>
						<li>
							<span class="title">商品件数：</span>
							<span class="value">{{ getCheckNum }}件</span>
						</li>
						<li>
							<span class="title">商品总价：</span>
							<span class="value">{{ getTotalPrice }}元</span>
						</li>
						<li>
							<span class="title">活动优惠：</span>
							<span class="value">-0元</span>
						</li>
						<li>
							<span class="title">优惠券抵扣：</span>
							<span class="value">-0元</span>
						</li>
						<li>
							<span class="title">运费：</span>
							<span class="value">0元</span>
						</li>
						<li class="total">
							<span class="title">应付总额：</span>
							<span class="value">
                <span class="total-price">{{ getTotalPrice }}</span>元
              </span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 结算列表END -->

			<!-- 结算导航 -->
			<div class="section-bar">
				<div class="btn">
					<router-link to="/shoppingCart" class="btn-base btn-return">返回购物车</router-link>
					<a href="javascript:void(0);" @click="addOrder" class="btn-base btn-primary">结算</a>
				</div>
			</div>
			<!-- 结算导航END -->
		</div>
		<!-- 主要内容容器END -->

		<el-dialog title="添加地址" width="800px" center :visible.sync="dialogVisible">
			<el-form
					:model="address"
					status-icon
					ref="ruleForm"
					class="demo-ruleForm"
			>
				<el-form-item prop="linkman">
					<el-input
							prefix-icon="el-icon-user-solid"
							placeholder="请输入收件人姓名!"
							v-model="address.name"
							maxlength="20"
							show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item prop="phone">
					<el-input
							prefix-icon="el-icon-view"
							type="text"
							placeholder="请输入收件人电话"
							v-model="address.phone"
							maxlength="11"
							show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-cascader size="large"
						 style="width: 100%"
								 :options="regionList"
								 v-model="regionIds"
								 placeholder="请选择省/市/区,试试搜索：北京">
					</el-cascader>
				</el-form-item>
				<el-form-item prop="address">
					<el-input
							type="textarea"
							:autosize="{ minRows: 2, maxRows: 4}"
							placeholder="请输入详细地址"
							v-model="address.addr">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" @click="addAddress()" style="width:100%;">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {mapActions} from "vuex";
    import {regionData, codeToText} from 'element-china-area-data'
    import Decimal from "decimal.js";

    export default {
        name: "",
        data() {
            return {
                selectAddressId: 0, // 选择的地址id
                // 地址列表
                addressList: [],
                dialogVisible: false,  //address dialog框显示
				address: {
                    name: '',
					phone: '',
                    addr: ''
				},
                regionList: regionData, //省市区地区value和地区code
                regionIds: []  //绑定输入框中的省市区数据，这里导入导出的都是地区代码
            };
        },
        created() {
            // 如果没有勾选购物车商品直接进入确认订单页面,提示信息并返回购物车
            if (this.getCheckNum < 1) {
                this.notifyError("请勾选商品后再结算");
                this.$router.push({path: "/shoppingCart"});
            }

            // 当前用户所有收货地址
            this.selectByUserId()
            /*this.$axios
                .get(`/user/address/selectByUserId/${this.$store.getters.getUser.id}`, {})
                .then(res => {
                    this.addressList = res.data;
                    this.addressList.forEach(address => {
                        if (address.isDefault) {
                            this.selectAddressId = address.id
						}
					})
                })
                .catch(err => {
                    return Promise.reject(err);
                })*/
        },
        computed: {
            Decimal() {
                return Decimal
            },
            // 结算的商品数量; 结算商品总计; 结算商品信息
            ...mapGetters(["getCheckNum", "getTotalPrice", "getCheckGoods"])
        },
        methods: {
            ...mapActions(["deleteShoppingCart"]),
            selectByUserId() {
                // 当前用户所有收货地址
                this.$axios
                    .get(`/user/address/selectByUserId/${this.$store.getters.getUser.id}`, {})
                    .then(res => {
                        this.addressList = res.data;
                        this.addressList.forEach(address => {
                            if (address.isDefault) {
                                this.selectAddressId = address.id
                            }
                        })
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
			},
            showAddressDialog() {
                this.dialogVisible = true
                this.regionIds = []
				this.address = {}
            },
			addAddress() {
              	/*const regionNames = new Array()
				this.regionIds.forEach(item => {
                    console.log(item)
                    regionNames.push(codeToText[item])
				})
				this.address.regionIds = this.regionIds
				this.address.regionNames = regionNames*/
				this.address.provinceId = this.regionIds[0]
				this.address.provinceName = codeToText[this.regionIds[0]]
                this.address.cityId = this.regionIds[1]
                this.address.cityName = codeToText[this.regionIds[1]]
                this.address.districtId = this.regionIds[2]
                this.address.districtName = codeToText[this.regionIds[2]]
				this.address.userId = this.$store.getters.getUser.id
				console.log(this.address)

                this.$axios
                    .post(`/user/address/add`, this.address)
                    .then(res => {
                        if (res.code === 0) {
                            this.dialogVisible = false
                            this.selectByUserId()
						}
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
			},
            deleteAddress(id) {
                this.$axios
                    .delete(`/user/address/deleteById/${id}`)
                    .then(res => {
                        if (res.code === 0) {
                            this.selectByUserId()
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
			},
            addOrder() {
                this.$axios
                    .post("/order/orderInfo/add", {
                        userId: this.$store.getters.getUser.id,
                        addressId: this.selectAddressId
                    })
                    .then(res => {
                        let products = this.getCheckGoods;
                        switch (res.code) {
                            // “001”代表结算成功
                            case 0:
                                for (let i = 0; i < products.length; i++) {
                                    const temp = products[i];
                                    // 删除已经结算的购物车商品
                                    this.deleteShoppingCart(temp.id);
                                }
                                // 提示结算结果
                                this.notifySucceed(res.msg);
                                // 跳转我的订单页面
                                this.$router.push({path: "/order"});
                                break;
                            default:
                                // 提示失败信息
                                this.notifyError(res.msg);
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            }
        }
    };
</script>
<style scoped>
    .confirmOrder {
        background-color: #f5f5f5;
        padding-bottom: 20px;
    }

    /* 头部CSS */
    .confirmOrder .confirmOrder-header {
        background-color: #fff;
        border-bottom: 2px solid #ff6700;
        margin-bottom: 20px;
    }

    .confirmOrder .confirmOrder-header .header-content {
        width: 1225px;
        margin: 0 auto;
        height: 80px;
    }

    .confirmOrder .confirmOrder-header .header-content p {
        float: left;
        font-size: 28px;
        line-height: 80px;
        color: #424242;
        margin-right: 20px;
    }

    .confirmOrder .confirmOrder-header .header-content p i {
        font-size: 45px;
        color: #ff6700;
        line-height: 80px;
    }

    /* 头部CSS END */

    /* 主要内容容器CSS */
    .confirmOrder .content {
        width: 1225px;
        margin: 0 auto;
        padding: 48px 0 0;
        background-color: #fff;
    }

    /* 选择地址CSS */
    .confirmOrder .content .section-address {
        margin: 0 48px;
        overflow: hidden;
    }

    .confirmOrder .content .section-address .title {
        color: #333;
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 20px;
    }

    .confirmOrder .content .address-body li {
        float: left;
        color: #333;
        width: 220px;
        height: 178px;
        border: 1px solid #e0e0e0;
        padding: 15px 24px 0;
        margin-right: 17px;
        margin-bottom: 24px;
    }

    .confirmOrder .content .address-body .in-section {
        border: 1px solid #ff6700;
    }

    .confirmOrder .content .address-body li h2 {
        font-size: 18px;
        font-weight: normal;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .confirmOrder .content .address-body li p {
        font-size: 14px;
        color: #757575;
    }

    .confirmOrder .content .address-body li .address {
        padding: 10px 0;
        max-width: 180px;
        max-height: 88px;
        line-height: 22px;
        overflow: hidden;
    }

    .confirmOrder .content .address-body .add-address {
        text-align: center;
        line-height: 30px;
    }

	 .confirmOrder .content .address-body .edit-delete-address {
		 text-align: right;
		 line-height: 30px;
	 }

    .confirmOrder .content .address-body .add-address i {
        font-size: 30px;
        padding-top: 50px;
        text-align: center;
    }

    /* 选择地址CSS END */

    /* 商品及优惠券CSS */
    .confirmOrder .content .section-goods {
        margin: 0 48px;
    }

    .confirmOrder .content .section-goods p.title {
        color: #333;
        font-size: 18px;
        line-height: 40px;
    }

    .confirmOrder .content .section-goods .goods-list {
        padding: 5px 0;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .confirmOrder .content .section-goods .goods-list li {
        padding: 10px 0;
        color: #424242;
        overflow: hidden;
    }

    .confirmOrder .content .section-goods .goods-list li img {
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .confirmOrder .content .section-goods .goods-list li .pro-name {
        float: left;
        width: 650px;
        line-height: 30px;
    }

    .confirmOrder .content .section-goods .goods-list li .pro-price {
        float: left;
        width: 150px;
        text-align: center;
        line-height: 30px;
    }

    .confirmOrder .content .section-goods .goods-list li .pro-status {
        float: left;
        width: 99px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .confirmOrder .content .section-goods .goods-list li .pro-total {
        float: left;
        width: 190px;
        text-align: center;
        color: #ff6700;
        line-height: 30px;
    }

    /* 商品及优惠券CSS END */

    /* 配送方式CSS */
    .confirmOrder .content .section-shipment {
        margin: 0 48px;
        padding: 25px 0;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
    }

    .confirmOrder .content .section-shipment .title {
        float: left;
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
    }

    .confirmOrder .content .section-shipment .shipment {
        float: left;
        line-height: 38px;
        font-size: 14px;
        color: #ff6700;
    }

    /* 配送方式CSS END */

    /* 发票CSS */
    .confirmOrder .content .section-invoice {
        margin: 0 48px;
        padding: 25px 0;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
    }

    .confirmOrder .content .section-invoice .title {
        float: left;
        width: 150px;
        color: #333;
        font-size: 18px;
        line-height: 38px;
    }

    .confirmOrder .content .section-invoice .invoice {
        float: left;
        line-height: 38px;
        font-size: 14px;
        margin-right: 20px;
        color: #ff6700;
    }

    /* 发票CSS END */

    /* 结算列表CSS */
    .confirmOrder .content .section-count {
        margin: 0 48px;
        padding: 20px 0;
        overflow: hidden;
    }

    .confirmOrder .content .section-count .money-box {
        float: right;
        text-align: right;
    }

    .confirmOrder .content .section-count .money-box .title {
        float: left;
        width: 126px;
        height: 30px;
        display: block;
        line-height: 30px;
        color: #757575;
    }

    .confirmOrder .content .section-count .money-box .value {
        float: left;
        min-width: 105px;
        height: 30px;
        display: block;
        line-height: 30px;
        color: #ff6700;
    }

    .confirmOrder .content .section-count .money-box .total .title {
        padding-top: 15px;
    }

    .confirmOrder .content .section-count .money-box .total .value {
        padding-top: 10px;
    }

    .confirmOrder .content .section-count .money-box .total-price {
        font-size: 30px;
    }

    /* 结算列表CSS END */

    /* 结算导航CSS */
    .confirmOrder .content .section-bar {
        padding: 20px 48px;
        border-top: 2px solid #f5f5f5;
        overflow: hidden;
    }

    .confirmOrder .content .section-bar .btn {
        float: right;
    }

    .confirmOrder .content .section-bar .btn .btn-base {
        float: left;
        margin-left: 30px;
        width: 158px;
        height: 38px;
        border: 1px solid #b0b0b0;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
    }

    .confirmOrder .content .section-bar .btn .btn-return {
        color: rgba(0, 0, 0, 0.27);
        border-color: rgba(0, 0, 0, 0.27);
    }

    .confirmOrder .content .section-bar .btn .btn-primary {
        background: #ff6700;
        border-color: #ff6700;
        color: #fff;
    }

    /* 结算导航CSS */

    /* 主要内容容器CSS END */
</style>
